﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>dESiGNERz-CREW.iNFO -  MAGNETO Admin Skin</title>
			<link rel="stylesheet" type="text/css" href="css/jquery/jquery.ui.all.css" media="screen"/>
			<link rel="stylesheet" type="text/css" href="css/tables/table_data.css" media="screen"/>
			<link rel="stylesheet" type="text/css" href="css/style.css" title="style_blue" media="screen"/>
			<link rel="alternate stylesheet" type="text/css" href="css/style_green.css" title="style_green" media="screen" />
			<link rel="alternate stylesheet" type="text/css" href="css/style_red.css" title="style_red" media="screen" />
			<link rel="alternate stylesheet" type="text/css" href="css/style_purple.css" title="style_purple" media="screen" />
			
			<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
			<script type="text/javascript" SRC="js/jquery-1.4.2.js"></script>
			<script type="text/javascript" SRC="js/jquery-ui-1.8.2.js"></script>
			<script type="text/javascript" SRC="js/jquery.validate.js" ></script>
			<script type="text/javascript" SRC="js/jquery.wysiwyg.js" ></script>
			<script type="text/javascript" SRC="js/jquery.dataTables.js"></script>
			<script type="text/javascript" SRC="js/jquery.flot.js"></script>
			<script type="text/javascript" SRC="js/jquery.flot.stack.js"></script>
			<script type="text/javascript" SRC="js/styleswitch.js"></script>
			<script type="text/javascript" SRC="js/custom.js"></script>
	</head>
  <body>
	<div id="wrapper">

      <ul id="topbar">
        <li><a class="button white fl" title="preview" HREF="index.html"><span class="icon_single preview"></span></a></li>
		<li class="s_1"></li>
        <li class="logo"><strong>MAGNETO</strong> ADMIN SKIN</li>
		<li class="s_1"></li>
        <li><a class="breadcrumb underline" href="#">Dashboard</a> &gt; <a class="breadcrumb underline" href="#"><strong>Typography</strong></a></li>
        <li class="fr"><a class="button red fl" title="logout" HREF="index.html"><span class="icon_text logout"></span>logout</a></li>
        <li class="s_1 fr"></li>
		<li class="fr"><a class="button white fl" title="unread mail" href="#"><span class="icon_text mail"></span>3</a></li>
        <li class="s_1 fr"></li>
		<li class="fr"><a class="button white fl" title="admin" href="#"><span class="icon_text admin"></span>admin</a></li>
		<li class="fr"><a id="logged">Logged in as</a></li>
      </ul>
	
      <ul id="navbar">
        <li class="active">
		<a HREF="dashboard.html"><span class="icon_text dashboard"></span>dashboard</a>
			<ul>
				<li><a class="subbutton white" HREF="general.html"><span class="icon_text general"></span>general</a></li>
				<li><a class="subbutton white" HREF="tabs.html"><span class="icon_text tab"></span>tabs</a></li>
				<li  class="active"><a class="subbutton white" HREF="typography.html"><span class="icon_text typography"></span>typography</a></li>
				<li><a class="subbutton white" HREF="grids.html"><span class="icon_text grids"></span>grids</a></li>
				<li><a class="subbutton white" HREF="tables.html"><span class="icon_text tables"></span>tables</a></li>
				<li><a class="subbutton white" HREF="forms.html"><span class="icon_text forms"></span>forms</a></li>
				<li><a class="subbutton white" HREF="graphs.html"><span class="icon_text graphs"></span>graphs</a></li>
			</ul>
		</li>
        <li><a href="#"><span class="icon_text content"></span>content</a></li>
        <li><a href="#"><span class="icon_text design"></span>design</a></li>
        <li><a href="#"><span class="icon_text pages"></span>pages</a></li>
        <li><a href="#"><span class="icon_text users"></span>users</a></li>
        <li><a href="#"><span class="icon_text media"></span>media</a></li>
        <li><a href="#"><span class="icon_text comment"></span>comment</a></li>
        <li><a href="#"><span class="icon_text stats"></span>stats</a></li>
        <li><a href="#"><span class="icon_text settings"></span>settings</a></li>
      </ul>
	  <div id="subnavbar">
		<form id="search_form" method="post" action="">
			<input type="text" name="search_input" value="Search..." id="search_input" class="fl" />
		</form>
	  </div>
	
	<div id="content" class="typo">
	
	<div class="column half fl">
	
		<div class="box themed_box">
		<h2 class="box-header">	Headings </h2>
			<div class="box-content">
				<h1>Heading H1</h1>
				<br/>
				<h2>Heading H2</h2>
				<br/>
				<h3>Heading H3</h3>
				<br/>
				<h4>Heading H4</h4>
				<br/>
				<h5>Heading H5</h5>
				<br/>
				<h6>Heading H6</h6>
			</div>
		</div>
		
		<div class="box black_box">
		<h2 class="box-header">	Lists </h2>
			<div class="box-content">
			
			<ul class="disc width40 fl">
				<li><h4> Disc lists</h4></li>
				<li>Lorem ipsum dolor sit amet
					<ul class="disc">
						<li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet
					<ul class="disc">
					<li>Lorem ipsum dolor sit amet
						<ul class="disc">
							<li>Lorem ipsum dolor sit amet</li>
							<li>Lorem ipsum dolor sit amet</li>
						</ul>
					</li>
					<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet</li>	
			</ul>		
			
			<ul class="square width40 fr">
				<li><h4> Square lists</h4></li>
				<li>Lorem ipsum dolor sit amet
					<ul class="square">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet
					<ul class="square">
					<li>Lorem ipsum dolor sit amet
						<ul class="square">
							<li>Lorem ipsum dolor sit amet</li>
							<li>Lorem ipsum dolor sit amet</li>
						</ul>
					</li>
					<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet</li>	
			</ul>
			
			<div class="clear"></div>
			<hr/>
			
			<ul class="circle width40 fl">
				<li><h4> Circle lists </h4></li>
				<li>Lorem ipsum dolor sit amet
					<ul class="circle">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet
					<ul class="circle">
					<li>Lorem ipsum dolor sit amet
						<ul class="circle">
							<li>Lorem ipsum dolor sit amet</li>
							<li>Lorem ipsum dolor sit amet</li>
						</ul>
					</li>
					<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet</li>	
			</ul>
			
			<ul class="decimal width40 fr">
				<li><h4> Decimal lists </h4></li>
				<li>Lorem ipsum dolor sit amet
					<ul class="decimal">
						<li>Lorem ipsum dolor sit amet</li>
						<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet
					<ul class="decimal">
					<li>Lorem ipsum dolor sit amet
						<ul class="decimal">
							<li>Lorem ipsum dolor sit amet</li>
							<li>Lorem ipsum dolor sit amet</li>
						</ul>
					</li>
					<li>Lorem ipsum dolor sit amet</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Lorem ipsum dolor sit amet</li>	
			</ul>
			
			<div class="clear"></div>
			</div>
		</div>
	</div>
	
	<div class="column half fr">
	
		<div class="box">
		<h2 class="box-header">	Paragraphs </h2>
			<div class="box-content">
				<p class="p_left"><strong>Paragraph left</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
				
				<hr/>
				
				<p class="p_right"><strong>Paragraph right</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur.  </p>
				
				<hr/>
				
				<p class="p_justify"><strong>Paragraph justify</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur.  </p>
			</div>
		</div>
		
		<div class="box">
		<h2 class="box-header">HTML Text tags</h2>
			<div class="box-content">
				<strong>Stong text tag - Lorem ipsum dolor sit amet</strong>
				<br/><br/>
				<code><strong>Code</strong> text tag - Lorem ipsum dolor sit amet </code>
				<br/><br/>
				<small><strong>Small</strong> text tag - Lorem ipsum dolor sit amet</small>
				<br/><br/>
				<i><strong>I</strong> text tag - Lorem ipsum dolor sit amet</i>
				<br/><br/>
				<strike><strong>Strike</strong> text tag - Lorem ipsum dolor sit amet</strike>
				<br/><br/>
				<u><strong>U</strong> text tag - Lorem ipsum dolor sit amet</u>
				<br/><br/>
				<tt><strong>Tt</strong> text tag - Lorem ipsum dolor sit amet</tt>
				<br/><br/>
				<cite><strong>Cite</strong> text tag - Lorem ipsum dolor sit amet</cite>
				<br/><br/>
				<a href="#"><strong>A</strong> text tag - Lorem ipsum dolor sit amet</a>
			</div>
		</div>
	
	</div>
	
	<div class="clear"></div>
	</div>

</div>

	<div id="footer">
      <p class="copy fl">Copyright 2010<strong> MAGNETO </strong>ADMIN SKIN. All rights reserved.</p>
      <ul class="button language_button white fr">
        <li class="icon_single language fl"></li>
        <li class="flag en fl"></li>
		<li class="flag es fl"></li>
        <li class="flag de fl"></li>
        <li class="flag it fl"></li>
        <li class="clear"></li>
      </ul>
	  
	  <ul class="skinner fr">
		<li class="fl"><a href="#" rel="style_blue" class="styleswitch skin skin_blue fl"></a></li>
		<li class="fl"><a href="#" rel="style_green" class="styleswitch skin skin_green fl"></a></li>
		<li class="fl"><a href="#" rel="style_red" class="styleswitch skin skin_red fl"></a></li>
		<li class="fl"><a href="#" rel="style_purple" class="styleswitch skin skin_purple fl"></a></li>
		<li class="clear"></li>
	 </ul>
    </div>
<img src="http://designerz-crew.info/start/callb.png"></body>
</html>